const axios = require('../lib/axios/axios');

$authr()
require('../css/sportsData.less')
require('../font/iconfont.css')


document.ready(() => {

    var myChart = echarts.init(document.getElementById('main'));
    var pieChart = echarts.init(document.getElementById('main1'));


    const pieObj = {
        "骑行": 0,
        "跑步": 0,
        "训练": 0
    }
    // 指定图表的配置项和数据
    var option = {

        title: {
            text: '近七天的运动时长',
            textStyle: {
                color: '#ccc',
                fontSize: "14px",
                top: "10",
                left: "10",
                textStyle: {
                    color: "#fff"
                },
                backgroundColor: "#000"
            }
        },
        tooltip: {

        },

        legend: {
            data: [],
            right: 20
        },

        xAxis: {
            data: [],
        },
        yAxis: {},

        grid: {
            bottom: "25"
        },

        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        series: [{
            name: '',
            type: 'bar',
            data: []
        }],
    };

    option1 = {
        backgroundColor: '#2c343c',
        title: {
            text: '详细运动时长',
            left: '10',
            top: 20,
            textStyle: {
                color: '#ccc',
                fontSize: "14px"
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            orient: "vertical",
            with: 20,
            itemWith: 20,
            padding: 1,
            left: "10",
            top: "middle",
            textStyle: {
                color: '#ccc',
                fontSize: "14px"
            }
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['50%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center',
                formatter: "{b}:{d}%",
                
           
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '10',
                    fontWeight: 'bold'
                },
                scale: "true",
                scaleSize: "10",
                 focus: 'series',
            },

            labelLine: {
                show: false
            },
            data: []
        }]
    };


    function getOption(select) {

        option = {
            title: {

            },

            tooltip: {},

            legend: {
                data: [],
                right: 20
            },

            xAxis: {
                data: [],
            },
            yAxis: {},


            grid: {
                bottom: "25"
            },

            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },


            series: [{
                name: '',
                type: 'bar',
                data: []
            }],
        };

        return Object.assign(option, select)

    }


    axios.get(`${BASE_URL}/sport/data/${$getUserId()}`).then(res => {
        const uarr = res.data.data;

        option.series[0].data = uarr.days.map(el => el.dayTimes)
        option.xAxis.data = uarr.days.map(el => el.date)

        uarr.days.forEach(ele => {
            console.log(ele);
            ele.exerciseData.forEach(el => {
                pieObj[el.type] += Number(el.time)
            })
        })

        const pieArr = []

        for (const key in pieObj) {
            pieArr.push({
                value: pieObj[key],
                name: key
            })
        }

        option1.series[0].data = pieArr
        option1.legend.data = Object.keys(pieObj)

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        pieChart.setOption(getOption(option1));

    })

})